<template>
    <div class="item-one" ref="itemOne">
        <div class="title">
            <span>核销记录</span>
            <div>
                <el-button type="primary" @click="back()">返回</el-button>
            </div>
        </div>
        <div class="container">
            <div class="itemBox">
                <div class="line">
                    <div>核销订单号</div>
                    <div>{{detail.outWfNo}}</div>
                </div>
                <div class="line">
                    <div>核销券码</div>
                    <div>{{detail.couponCode}}</div>
                </div>
                <div class="line">
                    <div>商户名称</div>
                    <div>{{detail.merchantName}}</div>
                </div>
                <div class="line">
                    <div>核销门店</div>
                    <div>{{detail.shopName}}</div>
                </div>
            </div>
            <div class="itemBox">
                <div class="line">
                    <div>通道类型</div>
                    <div>{{detail.channelTypeName}}</div>
                </div>
                <div class="line">
                    <div>支付订单原价</div>
                    <div>{{detail.writeOffAmount >= 0 ? detail.writeOffAmount / 100 + " 元": ""}}</div>
                </div>
                <div class="line">
                    <div>券面额</div>
                    <div>{{detail.couponAmount >= 0 ? detail.couponAmount /100 + " 元": ""}}</div>
                </div>
            </div>
            <div class="itemBox">
                <div class="line">
                    <div>核销状态</div>
                    <div :class="(this.detail.status == 3 && this.detail.cancelStatus == 1)?'red':''"> {{detail.status == 1?
                        '核销处理中':detail.status == 2? '核销失败':(detail.status == 3 && detail.cancelStatus == null)?
                        '核销成功':detail.status == 4? '撤销处理中':detail.status == 5? '撤销成功':(detail.status == 3 && detail.cancelStatus
                        == 1)?'核销成功(已撤销)':'核销成功(撤销失败)'}}
                    </div>
                </div>
                <div class="line">
                    <div>核销时间</div>
                    <div>{{detail.createTime}}</div>
                </div>
                <div class="line">
                    <div>操作员</div>
                    <div>{{detail.wfUserName}}</div>
                </div>
            </div>
        </div>

        <div class="title">
            <span>通道参数</span>
        </div>
        <div class="container">
            <div class="itemBox2">
                <div class="line">
                    <div>通道订单号</div>
                    <div>{{detail.channelOrderNo}}</div>
                </div>
                <div class="line">
                    <div>通道核销流水号</div>
                    <div>{{detail.channelTransId}}</div>
                </div>
                <div class="line">
                    <div>商品名称</div>
                    <div>{{detail.itemName}}</div>
                </div>
                <div class="line">
                    <div>通道商品id</div>
                    <div>{{detail.channelItemId}}</div>
                </div>
            </div>
            <div v-if="detail.channelType == 10002" class="itemBox2">
                <div class="line">
                    <div>购券支付金额</div>
                    <div>{{detail.buyerPayAmount >= 0 ? detail.buyerPayAmount /100 + " 元": ""}}</div>
                </div>
                <div class="line">
                    <div>商家实收金额</div>
                    <div>{{detail.receiptAmount >= 0 ? detail.receiptAmount /100 + " 元": ""}}</div>
                </div>
                <div class="line">
                    <div>商家优惠金额</div>
                    <div>{{detail.discountAmount >= 0 ? detail.discountAmount /100 + " 元": ""}}</div>
                </div>
                <div class="line">
                    <div>平台补贴金额</div>
                    <div>{{detail.channelSubsidy >= 0 ? detail.channelSubsidy /100 + " 元": ""}}</div>
                </div>
                <div class="line">
                    <div>可开票金额</div>
                    <div>{{detail.invoiceAmount >= 0 ? detail.invoiceAmount /100 + " 元": ""}}</div>
                </div>
            </div>
        </div>

        <div v-if="showCancelRecs">
            <div class="title">
                <span>撤销记录</span>
            </div>
            <div class="container">
            <div class="tableBox">
                <el-table
                        ref="multipleTable"
                        :show-overflow-tooltip="true"
                        :data="merchantarr"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        stripe
                        :header-cell-style="tableHeaderColor"
                        v-loading="loading">
                    <el-table-column label="撤销时间?撤销订单号" align="center" :render-header="renderheader">
                        <template slot-scope="scope">
                            <div>{{ scope.row.createTime}}</div>
                            <div>{{ scope.row.outWfNo}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column width="100" label="通道名称?撤销面额(元)" align="center" :render-header="renderheader">
                        <template slot-scope="scope">
                            <div>{{scope.row.channelTypeName}}</div>
                            <div>{{scope.row.couponAmount/100}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column property="channelOrderNo" label="通道订单号" align="center"></el-table-column>
                    <el-table-column property="merchantName" label="商户名称" align="center"></el-table-column>
                    <el-table-column property="shopName" label="门店名称" align="center"></el-table-column>
                    <el-table-column width="80" label="状态" align="center">
                        <template slot-scope="scope">
                            <div :class="scope.row.status == 6 ? 'grey' : scope.row.status == 4 ? 'orange' : scope.row.status == 5 ? 'reds' : ''">
                                {{scope.row.status == 6 ? '撤销失败' : scope.row.status == 4 ? '撤销处理中' : scope.row.status == 5 ? '撤销成功' : ''}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="wfUserName" label="操作员" align="center"></el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            @size-change="sizechange"
                            :page-size="size"
                            :current-page.sync="page"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                    ></el-pagination>
                </div>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
    import {writeoffrecordInfo, hxrecord} from "@/api/api";

    export default {
        name: "cxparticulars",
        data: function () {
            return {
                wfId: null,
                detail: {},
                showCancelRecs: false,
                merchantarr: [],
                page: 1,
                size: 10,
                total: 100,
                loading: false,
            };
        },
        created() {
            this.wfDetail();
        },
        methods: {
            wfDetail() {
                writeoffrecordInfo({}, this.$route.query.wfId).then(res => {
                    if (res.code == 405) {
                        sessionStorage.removeItem('token')
                        this.$router.push('/login');
                    } else if (res.code == 200) {
                        this.detail = res.data;
                        if (this.detail.cancelStatus == 1 || this.detail.cancelStatus == 2) {
                            this.showCancelRecs = true;
                            hxrecord({
                                orgOrderNo: this.detail.outWfNo,
                                cancelFlag: 1,
                                page: this.page,
                                size: this.size
                            }).then(res => {
                                this.merchantarr = res.data.rows
                                this.total = res.data.total
                            });
                        } else {
                            this.showCancelRecs = false;
                        }
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            back() {
                this.$router.back(-1);
            },
            renderheader(h, { column, $index }) {
                return h("span", {}, [
                    h("span", {}, column.label.split("?")[0]),
                    h("br"),
                    h("span", {}, column.label.split("?")[1])
                ]);
            },
            //多选框
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val;
            },
            //修改thead 背景色
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
                }
            },
            // 分页
            handleCurrentChange(val) {
                this.page = val;
                hxrecord({orgOrderNo: this.$route.query.channelOrderNo, page: this.page, size: this.size}).then(res => {
                    this.merchantarr = res.data.rows
                    this.total = res.data.total
                })

            },
            // 显示数量
            sizechange(val) {

                this.size = val
                this.page = 1

                hxrecord({orgOrderNo: this.$route.query.channelOrderNo, page: this.page, size: this.size}).then(res => {
                    this.merchantarr = res.data.rows
                    this.total = res.data.total
                })
            },
        },
        watch: {
            $route() {
                this.wfId = this.$route.query.wfId;
                if (this.wfId) {
                    this.wfDetail();
                }
            },
        },
    };
</script>
<style scoped lang='less'>
    .red {
        color: red!important;
    }
    .title {
        background: #fff;
        padding: 10px 10px;
        font-size: 18px;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
    }
    .container {
        width: 100%;
        display: flex;
        margin-bottom: 20px;
        box-sizing: border-box;
    }
    .container .itemBox {
        width: 33%;
    }
    .container .itemBox2 {
        width: 50%;
    }
    .container .line {
        width: 100%;
        display: flex;
        font-size: 14px;
        line-height: 200%;
    }
    .container .line div:nth-child(1) {
        width: 25%;
        text-align: left;
        word-break: break-all;
    }
    .container .line div:nth-child(2) {
        width: 75%;
        text-align: left;
        color: #888888;
        word-break: break-all;
    }
    .tableBox {
        width: 95%;
        margin: 0 auto;
    }

    [class*=" el-icon-"], [class^=el-icon-] {
        font-size: 30px;
    }

    .green {
        width: 70px;
        background: #97C05C;
        color: #fff;
        padding: 0 5px;
        border-radius: 10px;
    }

    .orange {
        background: #F29C38;
        color: #fff;
        padding: 0 5px;
        border-radius: 10px;
    }

    .grey {
        background: #888888;
        color: #fff;
        padding: 0 5px;
        border-radius: 10px;
    }

    .reds {
        width: 70px;
        background: #D3362F;
        color: #fff;
        padding: 0 5px;
        border-radius: 10px;
    }

    .blue {
        width: 70px;
        background: #4154AF !important;
        color: #fff;
        padding: 0 5px;
        border-radius: 10px;
    }

</style>